import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import queryString from 'query-string';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Input, Row, Col, Spin } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;
const { TextArea } = Input; // 文本域

@connect(({ definition, loading, publicdata }) => ({
  loading: loading.models.definition,
  dictCode: publicdata.dictCode,
  detailInfo: definition.detailInfo,
}))
@Form.create()
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pdId: null,
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { pdId } = queryString.parse(location.search);
    if (pdId) {
      dispatch({
        type: 'definition/getDetail',
        payload: {
          pdId,
        },
      });
    }
    this.setState({ pdId });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const dataInfo = {
      detailInfo: {},
    };
    dispatch({
      type: 'definition/updateModelData',
      payload: { ...dataInfo },
    });
    this.setState({ pdId: null });
  }

  // 提交数据
  submitData = () => {
    const { dispatch, form } = this.props;
    const { pdId } = this.state;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'definition/submit',
          payload: { values, pdId },
        });
      }
    });
  };

  render() {
    const { loading, form, detailInfo } = this.props;
    const { getFieldDecorator } = form;
    const { pdId } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title={`${pdId ? '修改' : '新增'}产品`}>
            <Form>
              <Row>
                <Col span={17} offset={1}>
                  <FormItem {...formItemLayout} label="产品名称">
                    {getFieldDecorator('pdName', {
                      rules: [{ required: true, message: '请输入' }],
                      initialValue: detailInfo.pdName,
                    })(
                      <Input
                        placeholder="请输入"
                        maxLength={50}
                        disabled={(pdId && true) || false}
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row style={{ marginBottom: 4 }}>
                <Col span={17} offset={1}>
                  <FormItem {...formItemLayout} label="分类">
                    {getFieldDecorator('pdCate', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: detailInfo.pdCate,
                    })(<DictCode dictType="PD_CATE" disabled={(pdId && true) || false} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={17} offset={1}>
                  <FormItem {...formItemLayout} label="产品描述">
                    {getFieldDecorator('pdInfo', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: detailInfo.pdInfo,
                    })(
                      <TextArea
                        placeholder="请输入......"
                        style={{ height: 100 }}
                        maxLength={200}
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={17} offset={1}>
                  <FormItem {...formItemLayout} label="收费频率">
                    {getFieldDecorator('billFreq', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: detailInfo.billFreq,
                    })(<DictCode dictType="PD_BILL_FREQ" disabled={(pdId && true) || false} />)}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>取消</Button>
            <Button type="primary" onClick={this.submitData}>
              保存
            </Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
